import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import * as echarts from 'echarts';
import '../index.less';
export default function EchartDom(props) {
  const { Dom, echartOpction,unit } = props;
  const drawLine = (id, data, num, dataX) => {
    const mayEcharts = echarts.init(document.getElementById(id));
    // console.log(mayEcharts);
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: params => {
          return `
            <div >
            <span style="display: inline-block; height: 6px; width: 6px; border-radius: 50%; background-color: #0b6fd6; margin-right: 5px; vertical-align: middle;"></span>
            <span style="margin-right: 20px; color: #333;">${params[0].name}</span>
            <span style="color: #333;">${params[0].value}${unit}</span>
            </div>
          `;
        },
        extraCssText: 'background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px #ccc;'
      },
      grid: {
        top: '10%',
        bottom: '30%',
        right: '3%',
        left: '70'
      },
      xAxis: {
        type: 'category',
        data: dataX
      },
      yAxis: {
        type: 'value',
        show: false,
        max: num
      },
      series: [
        {
          data,
          type: 'line',
          showSymbol: false
        }
      ]
    };
    mayEcharts.setOption(option);
    window.addEventListener('resize', () => {
      mayEcharts.resize();
    });
  };

  useEffect(() => {
    Dom &&
      echartOpction &&
      echartOpction.map(r => {
        drawLine(r.key, r.data, r.max, r.timer);
      });
  }, [echartOpction]);
  return <>{Dom}</>;
}
EchartDom.propTypes = {
  echartOpction: PropTypes.object,
  Dom: PropTypes.func,
  unit:PropTypes.string 
};
